<template>
    <div style="position: relative;">
        <img style="width: 12px; height: 12px;  position: absolute; left: 10px; top: 10px;" src="../assets/images/05M8Of8IU_1600747462767_ixJiMjsByl.png" alt="">
        <span style="color: aliceblue; font-size: 13px; font-weight: bold; margin-left: 30px;">
            <slot></slot>
        </span>
        <img style="width: 350px; height: 15px; position: absolute; left: 0; top: 10px;" src="../assets/images/znfH3e_yZ_1600747495511_Xb9kg5XpcP.png" alt="">
        <!-- 小点 -->
        <div class="dot"></div>
    </div>
</template>

<script>
export default {
    name: 'TitleBar.vue',
}
</script>
<style lang="scss" scoped>
// 小动画 
.dot {
    border-top: 1px solid white;
    width: 3px;
    height: 1px;
    // 匀速 循环播放动画 
    animation: totalLine 12s linear infinite;
    position: absolute;
    top: 23.5px;
    left: 100px;
}

@keyframes totalLine {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(150px)
    }

    75% {
        transform: translateX(75px)
    }

    100% {
        transform: translateX(0)
    }
}
</style>
